<template>
  <div class="edit-popup">
      <popup
          ref="popupRef"
          :title="popupTitle"
          :async="true"
          width="600px"
          @confirm="handleSubmit"
          @close="handleClose"
      >
          <el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
     
              <el-form-item label="父级菜单" prop="parent_id"  v-if="formData.parent_id !== 0">
                  <el-tree-select
                      class="flex-1"
                      v-model="formData.parent_id"
                      :data="menuOptions"
                      clearable
                      node-key="id"
                      :props="{
                          label: 'name'
                      }"
                      :default-expand-all="true"
                      placeholder="请选择父级菜单"
                      check-strictly
                  />
              </el-form-item>
              <el-form-item label="部门名称" prop="name">
                  <el-input v-model="formData.name" placeholder="请输入菜单名称" clearable />
              </el-form-item>
              <el-form-item label="负责人" prop="leader">
                  <el-input v-model="formData.leader" placeholder="请输入菜单名称" clearable />
              </el-form-item>
              <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="formData.phone" placeholder="请输入菜单名称" clearable />
              </el-form-item>
          
              <el-form-item 
                  label="菜单状态"
                  prop="status"
                  required
              >
                  <div>
                      <el-radio-group v-model="formData.status">
                          <el-radio :label="1">正常</el-radio>
                          <el-radio :label="0">停用</el-radio>
                      </el-radio-group> 
                  </div>
              </el-form-item>
              <el-form-item label="菜单排序" prop="sort">
                  <div>
                      <el-input-number v-model="formData.sort" :min="0" :max="9999" />
                      <div class="form-tips">数值越大越排前</div>
                  </div>
              </el-form-item>
          </el-form>
      </popup>
  </div>
</template>
<script  setup>
import {ref} from 'vue'
import { addDept,getDeptList,getDeptDeail,editDept } from '@/apis/system/dept' 
import Popup from '@/components/popup/index.vue'
import { arrayToTree, treeToArray } from '@/utils/util'
 

const emit = defineEmits(['success', 'close'])
const formRef = ref(null)
const popupRef = ref(null)
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑菜单' : '新增菜单'
})

 
const formData = reactive({
  id: '',
  //父级id
  parent_id: 0,  
  //名称
  name: '',
  //排序号
  sort: 0,
  // 路由路径
  leader: '',
  //权限链接
  phone: '', 
  //是否禁用 0=否， 1=是
  status: 1
})

const formRules = {
  name: [
      {
          required: true,
          message: '请输入部门名称',
          trigger: 'blur'
      }
  ],
}
const menuOptions = ref([])

const getDept = async () => {
  const data = await getDeptList({page:1,pagesize:99}) 
 const dept = arrayToTree(
      treeToArray(data.list)
  )  
  menuOptions.value = dept
}

const handleSubmit = async () => {
  await formRef.value?.validate()
  mode.value == 'edit' ? await editDept(formData) : await addDept(formData)
  popupRef.value?.close()
  emit('success')
}

const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = (data) => {
  for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
          //@ts-ignore
          formData[key] = data[key]
      }
  }
}

const getDetail = async (row) => {
  const data = await getDeptDeail({
      id: row.id
  })
  setFormData(data)
}

const handleClose = () => {
  emit('close')
}

getDept()

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
